<template>
    <div id="nav">
        <div :style="{background: 'url(' + header_pic + ')'}"></div>
        <div id="top-div">
            <span>酷Group</span>
            <div>
                <el-button id="menu-button" @click="drawer = true" size="mini" type="primary"
                           icon="el-icon-menu"></el-button>

            </div>
        </div>

        <el-drawer
                id="slide-menu"
                title="菜单"
                size="60%"
                :visible.sync="drawer"
                :direction="direction">
            <a></a>
            <el-divider></el-divider>
            <span @click="switchPage('join')">参与抽奖</span>
            <el-divider></el-divider>
            <span @click="switchPage('result')">抽奖结果</span>
            <el-divider></el-divider>
            <span @click="switchPage('addGoods')">增加奖品</span>
<!--            <router-link to="addGoods">增加奖品</router-link>-->
            <el-divider></el-divider>
        </el-drawer>
    </div>
</template>

<script>

    import header_pic from '@/assets/header.png'

    export default {
        name: "Nav",
        data() {
            return {
                header_pic: header_pic,
                drawer: false,
                direction: 'ltr',
            }
        },
        methods: {
            switchPage(url) {
                console.log("点击了" + url)
                this.$emit('switchPage', url)
                this.drawer = false
            }
        }
    }
</script>

<style scoped lang="less">

    #nav {
        position: relative;
        width: calc(100% - 10px);
        height: 60px;
        margin-left: 5px;
        border-radius: 15px;

        div:first-child {
            position: absolute;
            width: 100%;
            height: 50px;
            border-radius: 20px;
            margin-top: 7px;
            filter: blur(10px);
            z-index: -111;
        }

        #top-div {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 20px;
            background: rgba(97, 109, 127, 0.18);
            line-height: 60px;

            span {
                position: absolute;
                margin-left: 10%;
                font-size: 30px;
                color: #6f7c8e;
                font-weight: bold;
                text-shadow: #d4d4d4 1px 1px 5px;
            }

            div {
                float: right;
                margin-right: 20px;
                #menu-button {
                    border-radius: 15px;
                }
            }
        }
    }

    #slide-menu {
        span {
            margin-left: 15px;
            font-weight: bold;
        }
    }

</style>